<template>
  <div>
    <div class="nx-content">
      <div class="flex-bet">
        <div class="left-title flex">
          <div class="etitle">历史数据</div>
        </div>
        <el-form ref="searchForm" :inline="true" :model="searchForm" class="demo-form-inline">
          <el-form-item label="">
            <el-button-group>
              <el-button @click="changeDate(0)" :type="searchForm.timeType == 0 ? 'primary' : ''">最近一天</el-button>
              <el-button @click="changeDate(1)" :type="searchForm.timeType == 1 ? 'primary' : ''">一周</el-button>
              <el-button @click="changeDate(2)" :type="searchForm.timeType == 2 ? 'primary' : ''">最近一月</el-button>
            </el-button-group>
          </el-form-item>
          <el-form-item label=""></el-form-item>
        </el-form>
      </div>
    </div>
    <div class="length">
      <div class="litem">
        <img class="modalmax" src="@/assets/modalmax.png" />
        <span>最大值</span>
      </div>
      <div class="litem">
        <img class="modalmin" src="@/assets/modalmin.png" />
        <span>最小值</span>
      </div>
      <div class="litem">
        <div class="line"></div>
        <span>平均值</span>
      </div>
    </div>
    <div class="flexc">
      <div id="echart1" class="echartline"></div>
    </div>
  </div>
</template>
  <script>
import { getNumericalDataChart } from '@/api/device'
import * as echarts from 'echarts'

export default {
  components: {},
  props: {},
  // 表格数据
  data() {
    return {
      // 查询字段
      searchForm: {
        id: '',
        timeType: 0
      },
      tableData: [],
      typeDialog: false,
      addEditIsDialog: false, // 添加编辑页面状态
      date: [] // 日期范围
    }
  },
  // 初始化加载
  mounted() {
    this.searchForm.id = this.$route.query.id
    this.seeType = false

    // 查询
    this.getList()
  },
  // 自定义方法
  methods: {
    // 查询
    onSubmit() {
      this.getList()
    },
    // 范围切换
    changeDate(nowd) {
      if (this.searchForm.timeType != nowd) {
        this.searchForm.timeType = nowd
        this.getList()
      }
    },
    getLocalTime(nS) {
      return new Date(parseInt(nS)).toLocaleString().replace(/:\d{1,2}$/, ' ')
    },
    // 查询列表
    getList() {
      getNumericalDataChart(this.searchForm).then((res) => {
        if (res.code == 200) {
          if (res.data.xtimes !== [] && res.data.ydatas !== []) {
            let xdata = [],
              ydata = []
            res.data.xtimes.forEach((item) => {
              xdata.push(this.getLocalTime(item))
            })
            res.data.ydatas.forEach((item) => {
              ydata.push(item.value)
            })
            this.initLineChart('echart1', xdata, ydata)
          } else {
            this.initLineChart('echart1', [], [])
          }
        }
      })
    },
    // 初始化折线数据
    initLineChart(id, xdata, ydata, markdata) {
      let chartDom = echarts.getInstanceByDom(document.getElementById(id)) //获取已有echarts实例的DOM节点
      if (chartDom == null) {
        // 节点不存在，进行初始化
        chartDom = echarts.init(document.getElementById(id))
      }

      chartDom.setOption({
        backgroundColor: '',
        color: ['#27CDFF'],
        grid: {
          left: '6%',
          right: '6%',
          bottom: '3%',
          top: '15%',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          axisLine: {
            lineStyle: {
              width: 0.1,
              color: '#9BB7EF'
            }
          },
          //    axisLabel:{
          //         rotate:20,
          //    },
          type: 'category',
          data: xdata
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              width: 0.1,
              color: '#9BB7EF'
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: ['#F1F2F3'],
              width: 0.1
            }
          }
        },
        series: [
          {
            //   title:'大气温度',
            data: ydata,
            type: 'line',
            smooth: true,
            markLine: {
              data: [
                {
                  type: 'average',
                  name: '平均值',
                  lineStyle: { color: '#00FCF9' }
                }
              ]
            },
            markPoint: {
              itemStyle: { normal: { label: { color: '#FFFFFF' } } },
              data: [
                {
                  type: 'max',
                  name: '最大值',
                  itemStyle: { color: '#FF3A00' }
                },
                {
                  type: 'min',
                  name: '最小值',
                  itemStyle: { color: '#8898A8' }
                }
              ]
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0.1,
                  color: 'RGBA(44, 104, 139, 0.6)'
                },
                {
                  offset: 1,
                  color: 'rgba(255, 255, 255, 0)'
                }
              ])
            }
          }
        ]
      })
    }
  }
}
</script>
  <style lang="less" scoped>
.main-breadcrumb {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 76px;
  border-bottom: solid 20px #f2f2f2;
  padding-left: 20px;
  .main-breadcrumb-wrap {
    font-size: 16px;
    line-height: 68px;
    .main-breadcrumb-home {
      cursor: pointer;
      color: #666666;
      font-weight: bold;
    }
    .main-breadcrumb-sp {
      color: #666666;
      font-weight: bold;
    }
  }
}
.etitle {
  position: absolute;
  left: 2.13vw;
  color: black;
  font-size: 0.94vw;
}
.length {
  position: absolute;
  top: 5.28vw;
  right: 2.44vw;
  display: flex;
  align-items: center;
  .litem {
    display: flex;
    align-items: center;
    color: black;
    font-size: 0.73vw;
    margin-left: 2.1vw;
    img {
      width: 0.94vw;
      height: 1.1vw;
      margin-right: 0.5vw;
    }
    .line {
      width: 0.94vw;
      margin-right: 0.47vw;
      border-top: 1px dashed #00fcf9;
    }
  }
}
.flexc {
  display: flex;
  align-items: center;
  justify-content: center;
}
.echartline {
  width: 100%;
  height: 22vw;
  margin-top: 10.4vw;
}
</style>
  